﻿<cms-page-header cms-title="Create"
                 cms-parent-title="Pages"></cms-page-header>

<cms-form cms-name="mainForm"
          ng-submit="vm.save()"
          cms-loading="vm.formLoadState.isLoading">

    <cms-page-actions>

        <cms-button-submit cms-text="Save Draft"
                           cms-loading="vm.saveLoadState.isLoading"
                           ng-disabled="vm.mainForm.$invalid"></cms-button-submit>

        <cms-button cms-text="Save &amp; Publish"
                    cms-loading="vm.saveAndPublishLoadState.isLoading"
                    ng-disabled="vm.mainForm.$invalid"
                    ng-click="vm.saveAndPublish()"></cms-button>

        <cms-button cms-text="Cancel"
                    ng-click="vm.cancel()"></cms-button>

    </cms-page-actions>

    <cms-page-body cms-content-type="form">

        <cms-form-status></cms-form-status>

        <!--MAIN-->
        <cms-form-section cms-title="Main">

            <cms-form-field-dropdown cms-title="Page Type"
                                     cms-options="vm.pageTypes"
                                     cms-option-name="name"
                                     cms-option-value="value"
                                     cms-model="vm.command.pageType"
                                     cms-change="vm.onPageTypeChanged()"
                                     cms-description="Usually this will be 'Generic' but other page types can be used for special functions"
                                     required>
            </cms-form-field-dropdown>

            <cms-form-field-text cms-title="Title"
                                 cms-model="vm.command.title"
                                 cms-description="A few words descriptive page title, e.g. 'About the team'. Google SERP typically shows 50-60 characters"
                                 required
                                 cms-change="vm.onNameChanged()"
                                 maxlength="300"></cms-form-field-text>

            <cms-form-field-dropdown cms-title="Page Template"
                                     cms-options="vm.pageTemplates"
                                     cms-option-name="name"
                                     cms-option-value="pageTemplateId"
                                     cms-model="vm.command.pageTemplateId"
                                     required></cms-form-field-dropdown>

            <cms-form-field-tags cms-title="CMS Tags"
                                 cms-model="vm.command.tags"></cms-form-field-tags>

        </cms-form-section>

        <!--Page URL-->
        <cms-form-section cms-title="Page url">

            <cms-form-field-locale-selector cms-model="vm.command.localeId"
                                            cms-on-loaded="vm.onLocalesLoaded()"></cms-form-field-locale-selector>

            <cms-form-field-directory-selector cms-model="vm.command.pageDirectoryId"
                                                   cms-on-loaded="vm.onPageDirectoriesLoaded()"
                                                   required></cms-form-field-directory-selector>

            <cms-form-field-text cms-title="Page Path"
                                 cms-model="vm.command.urlPath"
                                 ng-if="vm.command.pageType !== 'CustomEntityDetails'"
                                 description="Lower case and containing only letter, numbers, underscores and hyphens. E.g. 'about-the-team'"
                                 maxlength="200"></cms-form-field-text>

            <cms-form-field-dropdown cms-title="Route Format"
                                     cms-options="vm.routingRules"
                                     cms-option-name="routeFormat"
                                     cms-option-value="routeFormat"
                                     cms-model="vm.command.customEntityRoutingRule"
                                     ng-if="vm.command.pageType === 'CustomEntityDetails'"
                                     required></cms-form-field-dropdown>
        </cms-form-section>

        <!--META DATA-->
        <cms-form-section cms-title="SEO">

            <cms-form-field-text-area cms-title="Meta Description"
                                      cms-model="vm.command.metaDescription"
                                      maxlength="300"
                                      cms-description="Ideally 25-250 characters. The Google SERP shows only the first 150 characters"></cms-form-field-text-area>

            <cms-form-field-text cms-title="OpenGraph Title"
                                 cms-model="vm.command.openGraphTitle"
                                 maxlength="300"
                                 cms-description="Optional. The title that shows up when sharing the page on social media"></cms-form-field-text>

            <cms-form-field-text cms-title="OpenGraph Description"
                                 cms-model="vm.command.openGraphDescription"
                                 cms-description="Optional. The description that shows up when sharing the page on social media"></cms-form-field-text>

            <cms-form-field-image-asset cms-title="OpenGraph Image"
                                        cms-load-state="vm.saveLoadState"
                                        cms-asset="vm.openGraphImage"
                                        cms-model="vm.command.openGraphImageId"
                                        cms-val-min-width="200"
                                        cms-val-min-height="200"
                                        cms-description="Optional. An image to show up when sharing the page on social media"></cms-form-field-image-asset>

            <cms-form-field-checkbox cms-title="Show in sitemap"
                                     cms-model="vm.command.showInSiteMap"
                                     cms-description="Indicates whether this page should be included in the site map file used by search engine robots"></cms-form-field-checkbox>

        </cms-form-section>

        <cms-form-section cms-title="Template Content"
                          ng-if="vm.command.pageType !== 'CustomEntityDetails'">

            <cms-form-section-actions>
                <cms-button cms-text="Save Draft & Edit Content"
                            cms-loading="vm.saveLoadState.isLoading"
                            ng-disabled="vm.mainForm.$invalid"
                            ng-click="vm.saveAndEdit()"></cms-button>
            </cms-form-section-actions>
            <cms-form-field-container>
                <div>
                    Template content can only be managed after the page
                    has been created.
                </div>
            </cms-form-field-container>
        </cms-form-section>
    </cms-page-body>
</cms-form>